<template>
    <div style="margin: 20px">
        <el-card>
            <div style="margin-bottom: 10px; display: flex">
<!--                <el-input class="w-50 m-2" style="width: 150px" placeholder="请输入关键词" v-model="form.keywords" />-->
<!--                <el-button style="margin-left: 10px" type="primary" @click="get">关键词搜索</el-button>-->
                <el-button @click="toAdd">新建标签</el-button>
            </div>
            <el-table :data="state.tableData" :border="true" highlight-current-row>
                <el-table-column sortable prop="id" label="ID" width="70" />
                <el-table-column sortable prop="tagName" label="标签名称" width="200" />
              <el-table-column prop="tagDesc" label="标签描述" width="250" />
              <el-table-column sortable prop="parentTagName" label="父标签" width="250" />
                <el-table-column fixed="right" label="操作" width="200">
                    <template v-slot="scope">
                        <el-button link size="small" @click="toEdit(scope.row)">编辑</el-button>
                      <el-popconfirm title="是否确认删除该项？" confirm-button-text="是" cancel-button-text="否"
                                     @confirm="doDel(scope.row.id)">
                        <template #reference>
                          <el-button link type="danger" size="small">删除</el-button>
                        </template>
                      </el-popconfirm>
                    </template>

                </el-table-column>

            </el-table>
        </el-card>
        <el-dialog v-model="dlgState.visible" title="新增标签" :width="600" @close="clean">
            <el-form :model="dlgState.form" ref="dlg_form"  label-position="left" label-width="100px">
                <el-form-item label="标签名称：" prop="tagName" required>
                    <el-input v-model="dlgState.form.tagName"></el-input>
                </el-form-item>
              <el-form-item label="标签描述：" prop="tagDesc">
                <el-input v-model="dlgState.form.tagDesc" type="textarea"></el-input>
              </el-form-item>
              <el-form-item label="父标签:" prop="fileTags">
                <el-select style="width: 200px;" placeholder="请选择标签" v-model="dlgState.form.parentTagId">
                  <el-option v-for="(item, index) in tagList" :key="index" :label="item.tagName"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelAdd">返回</el-button>
                  <el-popconfirm v-if="dlgState.isAdd" title="请确认是否与已有标签含义相同？" confirm-button-text="是" cancel-button-text="否"
                                                       @confirm="doAdd">
                        <template #reference>
                          <el-button type="primary" v-if="dlgState.isAdd">新增</el-button>
                        </template>
                      </el-popconfirm>
                  <el-button type="primary" @click="doEdit" v-else> 保存 </el-button>

                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import tagApi from "@/api/basis/policyTag";
import policyTagApi from "@/api/basis/policyTag";

// tableData
const form = reactive({
    current: 1,
    keywords: "",
    project_type: 1,
    size: 10,
});

type tag = {
  tagId : 0,
  tagName: "",
  tagDesc: "",
  parentTagId: 0,
  parentTagName: ""
}
const state = reactive({
    total: 0,
    tableData: [] as Array<tag>,
});
const handleSizeChange = (val: number) => {
    form.size = val;
    get();
};
const handleCurrentChange = (val: number) => {
    form.current = val;
    get();
};
const get = () => {
    tagApi.get().then((res) => {
        if (res.data.code === 200) {
            state.tableData = res.data.data;
          let tagDict = []
          for (let i = 0; i < tagList.value.length; i++) {
            let tag = tagList.value[i]
            tagDict[tag.id] = tag.tagName
          }
          for (var tagListElement of state.tableData) {
            if (tagListElement.parentTagId == undefined){
              tagListElement.parentTagName = "无"
            }else {
              tagListElement.parentTagName = tagDict[tagListElement.parentTagId]
            }
          }
        }
    });
};
// 对话框
const dlg_form = ref();
const dlgState = reactive({
    visible: false,
    isAdd: true,
    form: {
        tagName: "",
        tagDesc: "",
      parentTagId: null
    },
});
const toAdd = () => {
    dlgState.isAdd = true;
    dlgState.visible = true;
};
const cancelAdd = () => {
    dlgState.visible = false;
};
const doAdd = () => {
  tagApi.add({
            tagName: dlgState.form.tagName,
            tagDesc: dlgState.form.tagDesc
        })
        .then((res) => {
            if (res.status === 200) {
              if (res.data.code === 200){
                ElMessage.success("添加成功");
              }else{
                ElMessage.error(res.data.message);
              }
                get();
                dlgState.visible = false;
            }
        });
};
const clean = () => {
    dlgState.form = {
        tagName: "",
        tagDesc: "",
      parentTagId: null
    };
};
const tagList = ref([] as Array<any>)
const getTag = () => {
  policyTagApi.get().then((res) => {
    tagList.value = res.data.data
  })
}
getTag()
const toEdit = (row: any) => {
    dlgState.form = row;
    dlgState.isAdd = false;
    dlgState.visible = true;
    console.log(editForm.form);
};
const doEdit = () => {
    tagApi.update(dlgState.form).then((res) => {
        console.log(res);
        if (res.status === 200) {
          if (res.data.code === 200){
            ElMessage.success("保存成功");
          }else{
            ElMessage.error(res.data.message);
          }
          get();
          dlgState.visible = false;
        }
    });
};
const doDel = (id: number) => {
  tagApi.del(id).then((res) => {
    if (res.status === 200) {
      ElMessage.success("删除成功");
      get();
    }
  });
};
// 项目编辑
const editForm = reactive({
    form: {
        tagName: ""
    },
});

onMounted(() => {
    get();
});
</script>
<style lang="scss" scoped>
.tabs>.el-tabs__content {
    width: 100%;
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.tabs {
    margin: 20px;
}
</style>
<!-- 蚌埠 -->